import React, { Component, useRef, useEffect } from 'react'

function enhanHoc(Wrapper) {
	return function () {
		let dom = useRef();
		let fn = () => {
			console.log("捕获点击事件");
		}
		useEffect(() => {
			dom.current.addEventListener('click', fn)
			return () => {
				dom.current.removeEventListener('click',fn)
			}
		}, [])

		return (
			<div>
				<div ref={dom}>
					<Wrapper></Wrapper>
				</div>
			</div>
		)
	}
}

function Fn() {
	return (
		<div>fn</div>
	)
}

let Com = enhanHoc(Fn);

export default class App extends Component {
	
	render() {
		return (
			<div>
				<Com></Com>
				<button onClick={() => {this.add()}}>按钮</button>
			</div>
		)
	}

	add() {
		console.log("外部事件");
	}
}
